import React ,{ Component }  from 'react'

import {Row,Col,message} from 'antd'

import api from './ajaxaction'

import moment from 'moment';

import Clipboard from 'clipboard'


import {Link} from 'react-router-dom'


import { connect } from 'react-redux'

import {detail} from '../../actions/info'

const Label=(props)=>{
  return(
    <div className="label-deli">
      <label>{props.name}：</label>
      <div>{props.content}</div>
    </div>
  )

}
const Simli=(props)=>{
    return(
      <div className="sim-li" onClick={props.handClick}>
        <div className="sim-img">
          <Link to="/detail">
          <img src={props.urlImg} alt=""/>
          </Link>
        </div>
        <div className="sim-cont">
          <div className="sim-title">
          <Link to="/detail"><p>{props.tit}</p></Link>
            <span>{props.Time}</span>
          </div>
          <Link to="/detail"> <div className="sim-c">{props.content}</div></Link>
        </div>
      </div>
    )
}
@connect(
  state => state.inforesult,
  {detail}
)

class Detail extends Component{
  constructor(props){
    super(props);
     //this.id = ""+ (props.location.query) ? props.location.query.id : null;
    let id=localStorage.id;
    let key=localStorage.titleContentPrint;
    let keywords=localStorage.keywords;
    let st=Number(this.props.location.search.split('&')[1].substr(-1))
    this.state={
        id:id,
        key:key,
        keywords:keywords,
        objData:{},
        simListdata:[],
        img:'',
        istype:st
    }
  }
  componentDidMount(){
    this._renderData()
  }
  createMarkup(page) { 
    return {__html: page}; 
    };
  _renderData(){
    api.detail('/vrv-monitor-platform-web/data/queryById',this.state.id,'5000',this.state.keywords,this.state.key).then(res=>{
      if(res.data.success){
        this.setState({
          objData:res.data.data,
          simListdata:res.data.simList,
        })
        
      }
    })
  }

  copyBoard(){
    new Clipboard('.copy');
    message.success('复制成功');
  }
  async handClick(v1,v2){
    localStorage.id=v1
    localStorage.titleContentPrint=v2
    await this.setState({
      id:v1,
      titleContentPrint:v2
    })
    await this._renderData()
  }
  renderlist(){
    let html=''
      html=this.state.simListdata.map((d,index)=>(
        <Simli tit={d.title} Time={moment(parseInt(d.addTime,0)).format("HH:MM")} urlImg={d.img} content={d.content} handClick={()=>this.handClick(d.id,d.titleContentPrint)}></Simli>
      )
      )

    return html
  }
  render(){
    return( 
      <div className="detao-con">
        <Row>
          <Col span={this.state.istype===1?24:17} >
          <div className="left-detail">
            <p>{this.state.objData.title}</p>
            <Row className="label-list">
              <Col span={5}>
                <Label name="发布时间" content={moment(this.state.objData.addTime).format("YYYY-MM-DD  HH:MM:SS")}></Label>
                <Label name="发布网站" content={this.state.objData.webSite}></Label>
              </Col>
              <Col span={5}>
                <Label name="检测时间" content={moment(this.state.objData.poTime).format("YYYY-MM-DD  HH:MM:SS")}></Label>
                <Label name="发表人" content={this.state.objData.source}>{this.state.istype}</Label>
              </Col>
            </Row>
            <Row>
              <Col className="link-li">
                <label>原文链接：</label>
                <div><a href={this.state.objData.url}>{this.state.objData.url}</a></div>
                <span onClick={()=>this.copyBoard()} data-clipboard-text={this.state.objData.url} className="copy">复制文本</span>
              </Col>
              <Col className="link-li">
                <label>内容：</label>
                <div className="con-flex" dangerouslySetInnerHTML={this.createMarkup(this.state.objData.content)}></div>
              </Col>
              <Col className="link-li">
                <label>图片</label>
                <div className="con-flex">
                  <img src={this.state.objData.img} alt=""/>
                </div>
              </Col>
            </Row>
          </div>
          </Col>
          <Col span={this.state.istype===1?0:7}>
            <div className="article-list">
                <p className="new-title">相似文章</p>
                {this.renderlist()}
            </div>
          </Col>
          
        </Row>
      </div>
    )
  }
}
export default Detail